<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>室内监控图</title>
    <link rel="stylesheet" href="leaflet.css">
    <style type="text/css">
        html,
        body {
            width: 100vw;
            height: 100vh;
            margin: 0 !important;
            padding: 0 !important;
        }

        .map-container {
            height: 100vh;
            width: 100vw;
            position: relative;
            background-color: #dddddd;
            padding: 0;
            margin: 0;
        }

        #map {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .menu-bottom {
            position: fixed;
            z-index: 99999999999999999;
            bottom: 0;
            left: 0;
            width: 100vw;
            max-height: 50vh;
            overflow: auto;
            background-color: #fff;
            font-size: 2.4vh;
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
            box-shadow: 0 3px 14px 3px #ccc;
        }

        .menu-bottom .yc {
            text-align: center;
            padding-top: 10px;
            padding-bottom: 20px;
        }

        .menu-bottom .yc p {
            margin: 0;
        }

        .menu-bottom .deviceList {
            padding-left: 30px;
            padding-right: 30px;
            text-align: left;
        }

        .menu-bottom .deviceList .device {
            border-bottom: solid 1px #999999;
            margin: 0;
            padding-top: 20px;
            padding-bottom: 20px;
            position: relative;
        }

        .menu-bottom .deviceList .closeDetail {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 30px;
            height: 30px;
            z-index: 999;
            cursor: pointer;
        }

        .menu-bottom .deviceStatus {
            padding-left: 10px;
            padding-right: 10px;
            margin-left: 10px;
            display: inline-block;
            font-size: 1.5vh;
            line-height: 2vh;
            border-radius: 10px;
            color: #fff;
            background-color: #5673FF;
            position: relative;
            top: -2px;
        }

        .menu-bottom .deviceFloor {
            font-size: 1.9vh;
            color: #757D91;
            float: right;
            margin-top: 5px;
        }

        .menu-bottom .deviceAddress {
            padding-left: 30px;
            background-image: url("./address.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: left center;
            font-size: 1.9vh;
            margin-top: 10px;
            color: #999999;
        }

        .hide {
            display: none;
        }

        .img {
            text-align: center;
        }

        .img p {
            margin: 0;
        }

        .status-1 {
            background-color: #F03141 !important;
        }

        .status-2 {
            background-color: #FFD214 !important;
        }

        .status-4 {
            background-color: #FC7D28 !important;
        }

        .status-6 {
            background-color: #FC7070 !important;
        }

        .status-98 {
            background-color: #A634FE !important;
        }

        .img img {
            width: 20px;
            height: 10px;
        }

        .arrow-r {
            position: absolute;
            right: 10px;
            top: 3.5vh;
            width: 20px;
            height: 20px;
        }

        .active {
            display: block !important;
        }

        /*顶部选择框样式*/

        .menu-top {
            position: fixed;
            z-index: 99999999999999999;
            top: 0;
            left: 0;
            width: 100%;
            height: 5.6vh;
            color: #666666;
            box-shadow: 0 3px 14px 3px #ccc;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .floor,
        .status,
        .type {
            width: 33.333vw;
            float: left;
            height: 100%;
            background-color: #fff;
        }

        /*去掉input默认样式*/

        .menu-top input {
            background: none;
            outline: none;
            border: none;
            margin: 0;
            padding: 0;
        }

        /*显示框大小百分百*/

        .ansel_input,
        .ansel_input .ansel_inputval {
            width: 100%;
            height: 100%;
            text-align: center;
        }

        /*显示框文字样式*/

        .ansel_input .ansel_inputval {
            background-image: url("arrow_b.png");
            background-position: 85% center;
            background-repeat: no-repeat;
            background-size: 15px 15px;
        }

        /*选项框位置*/

        .ansel_select {
            position: fixed;
            top: 7vh;
            left: 5vw;
            display: none;
            background: #fff;
            width: 90vw;
            max-height: 70vh;
            overflow: auto;
            z-index: 99999999999999999;
            border-radius: 4px;
            box-shadow: 0px 3px 14px 3px #ccc;
        }

        /*选项样式*/

        .ansel_ul {
            overflow: hidden;
            margin: 10px;
            overflow-y: auto;
        }

        .ansel_ul .ansel_li {
            height: 35px;
            line-height: 35px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
        }

        .ansel_ul .ansel_li .ansel_check,
        .ansel_ul .ansel_li .ansel_cur {
            display: none !important;
        }

        .ansel_ul .ansel_li:active {
            background: #f2f2f2;
        }

        .ansel_btns {
            position: absolute;
            bottom: 0;
            border-top: 1px solid #f2f2f2;
            background: #fff;
            width: 100%;
            height: 35px;
            line-height: 35px;
            z-index: 19951024;
        }

        .ansel_btns .ansel_btnss {
            margin: 0 auto;
            overflow: hidden
        }

        .ansel_btns .ansel_btnss .ansel_ok {
            background: #09f;
            color: #fff;
            margin-right: 10px;
            margin-left: 20px;
        }

        .ansel_btns .ansel_btnss .ansel_no {
            color: #222;
            margin-right: 10px;
            float: right;
        }

        .ansel_ul .ansel_li .ansel_check {
            height: 14px;
            width: 14px;
            display: block;
            float: left;
            border-radius: 100%;
            border: 1px solid #ccc;
            margin: 10px 5px 10px 0;
            box-shadow: 0 0 2px 0 #ccc inset;
        }

        .ansel_ul .ansel_li .ansel_cur {
            box-shadow: 0 0px 1px 3px #09f inset;
            border: 1px solid #09f;
        }
    </style>
</head>

<body>
<div class="map-container">
    <div class="menu-top">
        <div class="floor">
            <select name="floor" isval="true" msg="选择楼层">
                <!--                <option value="" id="floor-option-none">选择楼层</option>-->
            </select>
        </div>
        <div class="status">
            <select name="status" isval="true" msg="选择状态">
                <option value="" name="" id="status-option-none">选择状态</option>
            </select>
        </div>
        <div class="type">
            <select name="type" isval="true" msg="选择分类">
                <option value="" id="type-option-none">选择分类</option>
            </select>
        </div>
    </div>
    <div id="map">
    </div>
    <div class="menu-bottom">
        <div class="img">
            <p class="img-t hide" onclick="showYcList()"><img src="./arrow_t.png" alt=""></p>
            <p class="img-b hide" onclick="showYc()"><img src="./arrow_b.png" alt=""></p>
        </div>

        <div class="yc hide">
            <p class="count hide">异常设备：<span class="countNum">0</span></p>
        </div>

        <div class="deviceList hide">
            <!--            <img class='closeDetail hide' onclick="showYc()"  src='./x.png' alt=''>-->
        </div>
    </div>
</div>

</body>

<script src="leaflet.js"></script>
<script src="LeafletDraggable.js"></script>
<script src="leaflet.rotatedMarker.js"></script>
<script src="leaflet.ChineseTmsProviders.js"></script>
<script src="jquery.min.js"></script>
<script src="ansel_select.js"></script>

<script type="text/javascript">
    //基础信息
    var ip = '';
    var port = '';
    var buildingId = '';
    var floorId = '';
    var sysId = '';
    var typeId = '';
    var statusId = '';
    var token = '';
    var buildingLng = '';
    var companyId = '';
    var buildingLat = '';
    var buildingUri = '';
    var floorArr = [];

    //地图信息
    var cadMap = null;
    var floorCur = null;
    var floorCad = null;
    var floorCadName = null;
    var floorEqu = null;
    var floorVideo = null;

    //面板信息
    var ycNum = 0;

    //状态信息
    var statusArr = {
        0: '正常',
        1: '火警',
        2: '故障',
        4: '监管',
        6: '屏蔽',
        98: '预警',
    }

    // //
    $(function () {
        //模拟app调用
        // bridgeData1(
        //     '1349634406515609600',
        //     '1',
        //     '220.178.27.116',
        //     '1080',
        //     '1080',
        //     '1343455529606975488'
        // );

        $(document).on("click", ".list", function () {
            var equid = $(this).data('equid');
            showDetail(equid)
        });

        $(document).on("click", ".jump", function () {


            var equid = $(this).data('equid');
            var buildingid = $(this).data('buildingid');
            var sysid = $(this).data('sysid');

            equid  = equid.toString();
            equid = equid.replace(/_/g,'.');
            equid = equid.replace(/-/g,':');

            var str = equid + ',' + buildingid + ',' + sysid;

            jump(str)
        });
    });

    $(document).click(function (e) {

        if ($(e.target).parents('.menu-top').length === 0) {
            $('.ansel_select').hide();
        }

    });

    var getBuild = $.Deferred();
    var getFloor = $.Deferred();
    var getStatus = $.Deferred();
    var getType = $.Deferred();
    var getJson = $.Deferred();
    var getEqu = $.Deferred();
    var getVideo = $.Deferred();

    //带筛选 全部点位界面
    function bridgeData1(bid, sid, i, p, t, c) {
        buildingId = bid;
        sysId = sid;
        ip = i;
        port = p;
        token = t;
        companyId = c;
        //获取楼栋信息、楼层信息、类型信息后执行
        $.when(wait(getBuild), wait2(getFloor), wait3(getType), wait7(getStatus))
            .done(function () {
                loadMap();
            })

    }

    var wait = function (dtd) {
        var tasks = function () {
            var url = "http://" + ip + ":" + port + "/app/area/getBuildingDetailById";
            $.ajax({
                type: "POST",
                url: url,
                beforeSend: function (request) {
                    request.setRequestHeader("kdla-access-token", token);
                    request.setRequestHeader("Content-Type", 'application/json');
                },
                data: JSON.stringify({
                    id: buildingId,
                }),
                success: function (result) {
                    buildingLng = result.data.aerialViewLongitude
                    buildingLat = result.data.aerialViewLatitude
                    dtd.resolve(); // 改变deferred对象的执行状态
                },
            });
        };
        tasks();
        return dtd;
    };
    var wait2 = function (dtd) {
        var tasks2 = function () {
            var url = "http://" + ip + ":" + port + "/app/area/getFloorListByBuildingId";
            $.ajax({
                type: "POST",
                url: url,
                beforeSend: function (request) {
                    request.setRequestHeader("kdla-access-token", token);
                    request.setRequestHeader("Content-Type", 'application/json');
                },
                data: JSON.stringify({
                    id: buildingId,
                }),
                success: function (result) {
                    if (result.data.length > 0) {
                        floorArr = result.data;
                        $.map(result.data, function (item) {
                            $("select[name='floor']").append(
                                "<option value='" +
                                item.id +
                                "'>" +
                                item.name +
                                "</option>")
                        })
                    }
                    dtd.resolve();
                },
            });
        };
        tasks2();
        return dtd;
    };
    var wait3 = function (dtd) {
        var tasks3 = function () {
            var url = "http://" + ip + ":" + port + "/app/equ/getEquTypeListBySysId";
            $.ajax({
                type: "POST",
                url: url,
                beforeSend: function (request) {
                    request.setRequestHeader("kdla-access-token", token);
                    request.setRequestHeader("Content-Type", 'application/json');
                },
                data: JSON.stringify({
                    id: sysId,
                }),
                success: function (result) {
                    if (result.data.length > 0) {
                        $.map(result.data, function (item) {
                            $("select[name='type']").append(
                                "<option value='" +
                                item.id +
                                "'>" +
                                item.name +
                                "</option>")
                        })
                    }
                    dtd.resolve();
                },
            });
        };
        tasks3();
        return dtd;
    };
    var wait7 = function (dtd) {
        var tasks7 = function () {
            var url = "http://" + ip + ":" + port + "/app/equ/getEquStatusBySysId";
            $.ajax({
                type: "POST",
                url: url,
                beforeSend: function (request) {
                    request.setRequestHeader("kdla-access-token", token);
                    request.setRequestHeader("Content-Type", 'application/json');
                },
                data: JSON.stringify({
                    id: sysId,
                }),
                success: function (result) {
                    if (result.data.length > 0) {
                        $.map(result.data, function (item) {
                            $("select[name='status']").append(
                                "<option value='" +
                                item.id +
                                "'>" +
                                item.name +
                                "</option>")
                        })
                    }
                    dtd.resolve();
                },
            });
        };
        tasks7();
        return dtd;
    };
    var wait4 = function (CadFloorId, dtd) {
        var tasks4 = function () {
            var url = "http://" + ip + ":" + port + "/app/area/getFloorCadJsonById";
            $.ajax({
                type: "POST",
                url: url,
                beforeSend: function (request) {
                    request.setRequestHeader("kdla-access-token", token);
                    request.setRequestHeader("Content-Type", 'application/json');
                },
                data: JSON.stringify({
                    id: CadFloorId,
                }),
                success: function (result) {
                    dtd.resolve(result);
                },
            });
        };
        tasks4();
        return dtd;
    };
    var wait5 = function (buildingId, floorId, sysId, typeId, statusId, dtd) {
        var tasks5 = function () {
            var url = "http://" + ip + ":" + port + "/app/home/getEquMonitorInfoForCad";
            $.ajax({
                type: "POST",
                url: url,
                beforeSend: function (request) {
                    request.setRequestHeader("kdla-access-token", token);
                    request.setRequestHeader("Content-Type", 'application/json');
                },
                data: JSON.stringify({
                    companyId: companyId,
                    buildingId: buildingId,
                    floorId: floorId,
                    equSysId: sysId,
                    equTypeId: typeId,
                    runStatus: statusId,
                }),
                success: function (result) {
                    dtd.resolve(result.data);
                },
            });
        };
        tasks5();
        return dtd;
    };
    var wait6 = function (floorId, dtd) {
        var wait6 = function () {
            var url = "http://" + ip + ":" + port + "/app/equ/getEquVideoListByFloorId";
            $.ajax({
                type: "POST",
                url: url,
                beforeSend: function (request) {
                    request.setRequestHeader("kdla-access-token", token);
                    request.setRequestHeader("Content-Type", 'application/json');
                },
                data: JSON.stringify({
                    id: floorId,
                }),
                success: function (result) {
                    dtd.resolve(result.data);
                },
            });
        };
        wait6();
        return dtd;
    };

    $("select[name=floor]").change(function () {
        if (floorArr.length > 0) {
            for (var i = 0; i < floorArr.length; i++) {
                var floor = floorArr[i];
                if (floor.id == $(this).val()) {
                    removeFromMap(floorCadName);
                    removeFromMap(floorCad);
                    removeFromMap(floorVideo);
                    removeFromMap(floorEqu);
                    getJson = $.Deferred();
                    getEqu = $.Deferred();
                    getVideo = $.Deferred();
                    ycNum = 0;
                    $('.device').remove()
                    floorCur = floor;
                    addFloorCad(floorCur)
                }
            }
        }
    });

    $("select[name=type], select[name=status] ").change(function () {
        removeFromMap(floorCadName);
        removeFromMap(floorCad);
        removeFromMap(floorVideo);
        removeFromMap(floorEqu);
        getJson = $.Deferred();
        getEqu = $.Deferred();
        getVideo = $.Deferred();
        ycNum = 0;
        $('.device').remove()
        addFloorCad(floorCur)
    });

    function removeFromMap(layer) {
        if (cadMap.hasLayer(layer)) {
            layer.removeFrom(cadMap);
        }
    }

    function selectInit() {
        $("select[name=floor]").anselcfg({});
        $("select[name=status]").anselcfg({});
        $("select[name=type]").anselcfg({});
    }

    function loadMap() {
        selectInit();
        if (floorArr.length > 0) {
            //获取第一个楼层信息
            floorCur = floorArr[0];
            //选择选项
            $("select[name=floor]").find("option[value='" + floorCur['id'] + "']").attr("selected", true);
            // $(".floor").find('.ansel_inputval').val(floorCur['name'] );

            //获取第一个楼层信息
            //设置旋转角
            rotateAngle = 0;
            $('#map').css('transform', 'rotate(' + rotateAngle + 'deg)');

            cadMap = L.map("map", {
                minZoom: 12,
                maxZoom: 23,
                attributionControl: false,
                logo: false, //不显示logo
                zoomControl: false, //不显示放大缩小按钮
                center: [buildingLat, buildingLng], //这里每个楼栋的经纬度
                zoom: 20
            });
            cadMap.dragging._draggable.setRotate(rotateAngle);
            addFloorCad(floorCur);
        }
    }

    function addFloorCad(floor) {
        $.when(wait4(floor.id, getJson))
            .done(function (res) {
                //获取到楼层cadjson
                // var cadJson = eval("0,(" + json + ")");
                var cadJson = res.data.cadJson;
                floorCad = L.featureGroup();
                var WALL = cadJson.lines.WALL, WINDOW = cadJson.lines.WINDOW, Road = cadJson.lines.Road,
                    Center = cadJson.lines.Center, points = cadJson.points, fontsize = cadJson.fontsize;

                if (WALL && WALL.length > 0) {
                    for (var i = 0; i < WALL.length; i++) {
                        var latlng = WALL[i];
                        L.polyline(latlng, {
                            color: "#012cfc",
                            weight: 1.0,
                        }).addTo(floorCad);
                    }
                }

                if (WINDOW && WINDOW.length > 0) {
                    for (var i = 0; i < WINDOW.length; i++) {
                        var latlng = WINDOW[i];
                        L.polyline(latlng, {
                            color: "#0067ff",
                            weight: 1.0,
                        }).addTo(floorCad);
                    }
                }

                if (Road && Road.length > 0) {
                    for (var i = 0; i < Road.length; i++) {
                        var latlng = Road[i];
                        L.polyline(latlng, {
                            color: "#0da04f",
                            weight: 1.0,
                        }).addTo(floorCad);
                    }
                }
                if (Center && Center.length > 0) {
                    for (var i = 0; i < Center.length; i++) {
                        var latlng = Center[i];
                        L.polyline(latlng, {
                            color: "#0da04f",
                            weight: 2.0,
                            opacity: 1,
                            dashArray: "30,10,5,10",
                        }).addTo(floorCad);
                    }
                }


                floorCadName = L.featureGroup();


                if (points && points.length > 0) {
                    for (var i = 0; i < points.length; i++) {
                        var item = points[i];
                        var lat = item.latlng[0];
                        var lng = item.latlng[1];
                        var name = item.name;

                        var corner1 = L.latLng(lat - fontsize, lng - 2 * fontsize),
                            corner2 = L.latLng(lat + fontsize, lng + 2 * fontsize);
                        var bounds = L.latLngBounds(corner1, corner2);
                        var svgElement = document.createElementNS(
                            "http://www.w3.org/2000/svg",
                            "svg"
                        );
                        svgElement.setAttribute("viewBox", "0 0 40 40");
                        svgElement.innerHTML =
                            '<text   x="20" y="20" text-anchor="middle" dominant-baseline="middle" fill="black" >' +
                            name +
                            "</text>";
                        L.svgOverlay(svgElement, bounds).addTo(floorCadName);
                    }
                }

                floorCad.addTo(cadMap);
                floorCadName.addTo(cadMap);

                if (Object.values(floorCad._layers).length > 0) {
                    floorCad.addTo(cadMap);
                    cadMap.fitBounds(floorCad.getBounds());
                }


                //点位信息
                floorEqu = null;
                floorEqu = L.featureGroup();
                $.when(wait5(buildingId, $('select[name=floor]').val(), sysId, $('select[name=type]').val(), $('select[name=status]').val(), getEqu))
                    .done(function (res) {
                        if (res.length > 0) {
                            for (var i = 0; i < res.length; i++) {
                                var device = res[i];
                                var eqq = device.equId;


                                eqq= eqq.replace(/\./g,'_');
                                device.equId = eqq.replace(':','-');


                                var classnnn = '0';
                                if (device.runStatus != '0') {
                                    ycNum = ycNum + 1;
                                    classnnn = '1'
                                }
                                if (device.latitude > 0 && device.longitude > 0) {
                                    L.marker(L.latLng(device.latitude, device.longitude), {
                                        deviceId: device.equId,
                                        icon: new L.Icon({
                                            //预警icon
                                            iconUrl: device.runStatusIcon, //设备的图标，后台直接推送url,
                                            iconSize: [33, 38],
                                            iconAnchor: [17, 38],
                                            popupAnchor: [1, -38]
                                        }),
                                    }).on('click', function (e) {
                                        showDetail(this.options.deviceId)
                                    }).addTo(floorEqu);
                                }

                                //添加点位列表
                                $('.deviceList').append("<p class='device hide device-" + device.equId + " device-" + classnnn + "' data-equid='" + device.equId + "' data-buildingid='" + device.buildingId + "' data-sysid='" + device.equSysId + "'     >" +
                                    "<span class='deviceName'>" + device.name + "</span>" +
                                    "<span class='deviceStatus status-" + device.runStatus + "'>" + statusArr[device.runStatus] + "</span>" +
                                    "<span class='deviceFloor hide'>" + floorCur.name + "</span>" +
                                    "<br>" +
                                    "<span class='deviceAddress hide'>" +
                                    "<img class='arrow-r'  src='./arrow_r.png' alt=''>" +
                                    device.address + "</span>" +
                                    "</p>")
                            }
                        }

                    }).then(function () {
                    floorEqu.addTo(cadMap);
                    //添加下面列表
                    showYc(ycNum)
                })

                //添加监控设备
                floorVideo = null;
                floorVideo = L.featureGroup();
                $.when(wait6($('select[name=floor]').val(), getVideo))
                    .done(function (ress) {
                        if (ress.length > 0) {
                            for (var i = 0; i < ress.length; i++) {
                                var video = ress[i];
                                if (video.latitude > 0 && video.longitude > 0) {
                                    var videoMarker = L.marker(L.latLng(video.latitude, video.longitude), {
                                        video: video,
                                        icon: new L.Icon({
                                            //预警icon
                                            iconUrl: 'http://134.175.220.20/leaflet/video.png', //设备的图标，后台直接推送url,
                                            iconSize: [33, 38],
                                            iconAnchor: [17, 38],
                                            popupAnchor: [1, -38]
                                        }),
                                    }).on('click', function (e) {
                                        jump2(this.options.video);
                                    }).addTo(floorVideo);
                                }
                            }
                        }
                    }).then(function () {
                    floorVideo.addTo(cadMap);
                })

            })


    }

    function showYcList() {
        if (ycNum != 0) {
            $('.jump').removeClass('jump');
            $('.list').removeClass('list');
            $('.active').removeClass('active');
            //显示故障列表
            $('.deviceList').addClass('active');
            $('.device-1').addClass('active list');
            //显示图标
            $('.img-b').addClass('active');
            $('.deviceFloor').addClass('active');
        }
    }

    function showYc(num) {
        $('.jump').removeClass('jump');
        $('.list').removeClass('list');
        $('.active').removeClass('active');
        $('.img-t').addClass('active');
        //异常报警显示
        $('.countNum').html(num);
        $('.yc').addClass('active');
        $('.yc .count').addClass('active');
    }

    function showDetail(equId) {
        $('.jump').removeClass('jump');
        $('.list').removeClass('list');
        $('.active').removeClass('active');
        $('.deviceFloor').removeClass('active');

        $('.img-b').addClass('active');
        $('.deviceList').addClass('active');
        $('.closeDetail').addClass('active');
        $('.device-' + equId).addClass('active jump');
        $('.device-' + equId + ' .deviceAddress').addClass('active');
    }

    function jump(str) {



        window.WebViewJavascriptBridge.callHandler(
            'skipToDeviceDetail'
            //设备id 楼栋id 系统id
            , str,
            function (responseData) {

            }
        );
    }

    function jump2(video) {
        window.WebViewJavascriptBridge.callHandler(
            'skipToVideoDetail'
            //设备id 楼栋id 系统id
            , '{"accessMode":"' + video.accessMode + '","serial":"' + video.serial + '","channelNo":"' + video.channelNo + '","streamUrl":"' + video.streamUrl + '"}',
            function (responseData) {

            }
        );
    }
</script>

</html>